<template>
  <div class="global-properties-container">
    <h2>全局属性 (Global Properties)</h2>
    <p class="description">Vue 3中在应用实例上挂载全局属性和方法，便于在所有组件中访问</p>
    
    <div class="demo-section">
      <div class="global-data-section">
        <h3>全局数据访问</h3>
        <div class="data-display">
          <p><strong>应用名称:</strong> {{ $appInfo.appName }}</p>
          <p><strong>应用版本:</strong> {{ $appInfo.version }}</p>
          <p><strong>环境:</strong> {{ $appInfo.environment }}</p>
        </div>
      </div>
      
      <div class="global-methods-section">
        <h3>全局方法使用</h3>
        <div class="method-demo">
          <input v-model="message" placeholder="输入消息" />
          <button @click="showGlobalMessage">显示全局消息</button>
          <button @click="showGlobalError">显示全局错误</button>
        </div>
      </div>
      
      <div class="child-component-section">
        <h3>子组件中的全局属性</h3>
        <GlobalChildComponent />
      </div>
    </div>
    
    <div class="code-example">
      <h3>代码示例</h3>
      <CodeBlock 
        :code="mainJsCode" 
        language="javascript" 
        :showLineNumbers="true" 
        :defaultDarkMode="false"
      />
      <CodeBlock 
        :code="componentCode" 
        language="vue" 
        :showLineNumbers="true" 
        :defaultDarkMode="false"
      />
    </div>
    
    <div class="features-list">
      <h3>主要特点</h3>
      <ul>
        <li>🌍 在应用级别定义全局属性，所有组件可直接访问</li>
        <li>🔧 适用于工具函数、配置信息、API客户端等共享资源</li>
        <li>📦 替代Vue 2中的Vue.prototype挂载方式</li>
        <li>🧩 支持TypeScript类型声明，提供更好的类型支持</li>
        <li>⚡ 简化跨组件共享功能的实现方式</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import GlobalChildComponent from '@components/subcomponents/GlobalChildComponent.vue'
import CodeBlock from '@components/CodeBlock.vue'

const message = ref('Hello from Global Properties Demo!')

// 调用全局方法
function showGlobalMessage() {
  $showMessage(message.value || '默认全局消息')
}

function showGlobalError() {
  $showError('这是一个全局错误消息示例')
}

// 主文件代码示例
const mainJsCode = `// main.js\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport router from './router'\n\n// 创建应用实例\nconst app = createApp(App)\n\n// 挂载全局属性\napp.config.globalProperties.$appInfo = {\n  appName: 'Vue 3 特性演示',\n  version: '1.0.0',\n  environment: 'development'\n}\n\n// 挂载全局方法\napp.config.globalProperties.$showMessage = (message) => {\n  alert('[全局消息] ' + message)\n}\n\napp.config.globalProperties.$showError = (error) => {\n  console.error('[全局错误]', error)\n  alert('[全局错误] ' + error)\n}\n\n// 注意: 在TypeScript项目中，需要在单独的.d.ts文件中添加类型声明\n// 这里省略declare module部分以避免构建错误\n\n// 使用路由\napp.use(router)\n\n// 挂载应用\napp.mount('#app')`

// 组件中使用代码示例
const componentCode = `// 在任何组件中使用
&lt;template&gt;
  &lt;div&gt;
    &lt;p&gt;应用名称: {{ $appInfo.appName }}&lt;/p&gt;
    &lt;button @click="handleClick"&gt;点击我&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script setup&gt;
// 直接在模板中使用
// 或者在脚本中使用
import { getCurrentInstance } from 'vue'

const internalInstance = getCurrentInstance()

function handleClick() {
  // 方式1: 直接在模板中使用 $showMessage
  
  // 方式2: 在脚本中通过实例访问
  internalInstance?.proxy?.$showMessage('通过实例访问全局方法')
  
  // 获取全局属性
  console.log(internalInstance?.proxy?.$appInfo)
}
&lt;/script&gt;`
</script>

<style scoped>
.global-properties-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Arial', sans-serif;
}

h2 {
  color: #333;
  text-align: center;
  margin-bottom: 10px;
  font-size: 2rem;
}

.description {
  text-align: center;
  color: #666;
  margin-bottom: 30px;
  font-size: 1.1rem;
}

.demo-section {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.global-data-section,
.global-methods-section,
.child-component-section {
  margin-bottom: 25px;
  padding: 20px;
  background-color: white;
  border-radius: 6px;
}

.global-data-section {
  border-left: 4px solid #3498db;
}

.global-methods-section {
  border-left: 4px solid #2ecc71;
}

.child-component-section {
  border-left: 4px solid #f39c12;
}

.data-display p {
  margin: 8px 0;
  padding: 8px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.method-demo {
  margin-top: 15px;
}

.method-demo input {
  padding: 8px 12px;
  margin-right: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 300px;
}

.method-demo button {
  padding: 8px 16px;
  margin-right: 10px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.method-demo button:last-child {
  background-color: #e74c3c;
}

.method-demo button:hover {
  opacity: 0.9;
}

.code-example {
  margin-bottom: 30px;
}

.code-block {
  background-color: #2d3748;
  border-radius: 6px;
  padding: 20px;
  overflow-x: auto;
  margin-bottom: 15px;
}

pre {
  margin: 0;
}

code {
  color: #e2e8f0;
  font-family: 'Consolas', 'Monaco', monospace;
}

.features-list {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
}

.features-list ul {
  list-style-type: none;
  padding-left: 0;
}

.features-list li {
  padding: 10px 0;
  padding-left: 20px;
  border-bottom: 1px solid #eee;
  position: relative;
}

.features-list li:last-child {
  border-bottom: none;
}
</style>